Shartli uslublash uchun kuchli CSS @when qoidasini o'rganing, bu esa dinamik va moslashuvchan dizaynlarni yanada yaxshilangan boshqaruv va moslashuvchanlik bilan ta'minlaydi.
CSS @when: Shartli uslublashning kelajagi
Veb-ishlab chiqish dunyosi doimiy ravishda rivojlanib bormoqda va CSS ham bundan mustasno emas. CSS landshaftiga yaqinda kiritilgan eng hayajonli va istiqbolli yangiliklardan biri bu @when qoidasidir. Ushbu kuchli xususiyat shartli uslublarni qo'llashning yangi usulini taqdim etadi, an'anaviy media so'rovlarining cheklovlaridan tashqariga chiqadi va yanada dinamik va moslashuvchan dizaynlar uchun imkoniyatlar ochadi.
CSS @when nima?
@when qoidasi CSS uslublarini ma'lum shartlarga asoslangan holda qo'llashga imkon beradi. U media so'rovlari, konteyner so'rovlari va hatto shartli uslublash uchun JavaScriptga asoslangan echimlarga nisbatan ko'proq ko'p qirrali va ifodali muqobil sifatida ishlaydi. Uni CSS uchun "agar-u holda" bayoni deb o'ylang.
@when qoidasining asosiy sintaksisi quyidagicha:
@when (shart) {
/* Shart to'g'ri bo'lganda qo'llaniladigan uslublar */
}
shart turli xil mantiqiy ifodalar bo'lishi mumkin, bu @when qoidasini juda moslashuvchan qiladi. Ushbu maqolada ba'zi aniq misollarni ko'rib chiqamiz.
Nima uchun @when dan foydalanish kerak? Afzalliklari va foydalari
@when qoidasi shartli uslublashning mavjud usullariga nisbatan bir nechta asosiy afzalliklarni taklif etadi:
- Moslashuvchanlikni oshirish: Asosan ko'rish oynasi o'lchamiga asoslangan media so'rovlaridan farqli o'laroq,
@whensizga uslublarni moslashtirilgan xususiyatlar (CSS o'zgaruvchilari), element atributlari va hatto ma'lum HTML elementlarining mavjudligi yoki yo'qligi kabi keng ko'lamli omillarga asoslanishga imkon beradi. - O'qish va texnik xizmat ko'rsatishning yaxshilanishi: Shartli mantiqni to'g'ridan-to'g'ri CSS-ga o'rnatish orqali,
@whenkodingizni o'z-o'zini hujjatlashtiruvchi va tushunishni osonlashtiradi. Bu murakkab JavaScript echimlarga bo'lgan ehtiyojni kamaytiradi va uslublar jadvalingizning umumiy texnik xizmatini yaxshilaydi. - Qayta foydalanishni kengaytirish: Siz
@whenqoidalari ichida murakkab shartli uslublarni belgilashingiz va ularni veb-saytingiz yoki ilovangizda qayta ishlatishingiz mumkin. Bu kodni qayta ishlatishga yordam beradi va ortiqchalikni kamaytiradi. - Potentsial ravishda yaxshi ishlash: Ba'zi hollarda,
@whendan foydalanish JavaScriptga asoslangan echimlarga nisbatan ishlashni yaxshilashga olib kelishi mumkin, chunki brauzer shartli mantiquni o'ziga xos ravishda boshqara oladi. - Kodingizni kelajakka moslashtirish: CSS rivojlanishda davom etar ekan,
@whenyanada dinamik va moslashuvchan foydalanuvchi interfeyslarini yaratish uchun mustahkam poydevor yaratadi.
Shart sintaksisini tushunish
@when ning haqiqiy kuchi keng turdagi shartlarni boshqarish qobiliyatidadir. Mana bir necha misollar:
1. Maxsus xususiyatlarni (CSS o'zgaruvchilari) tekshirish
Siz holat ma'lumotlarini saqlash uchun maxsus xususiyatlardan foydalanishingiz va keyin shu xususiyatlarning qiymatiga asoslangan uslublarni qo'llash uchun @when dan foydalanishingiz mumkin. Bu mavzularni yaratish yoki foydalanuvchilarga veb-saytingizning ko'rinishini moslashtirishga ruxsat berish uchun ayniqsa foydalidir.
:root {
--theme-color: #007bff; /* Standart mavzu rangi */
--font-size: 16px;
}
@when (--theme-color = #007bff) {
body {
background-color: #f0f8ff; /* Mavzu rangi ko'k bo'lganda och rangni qo'llash */
}
}
@when (--font-size > 18px) {
p {
line-height: 1.6;
}
}
Ushbu misolda, birinchi @when qoidasi --theme-color maxsus xususiyati #007bff ga tengligini tekshiradi. Agar shunday bo'lsa, u body elementiga och fon rangini qo'llaydi. Ikkinchi @when qoidasi --font-size 18px dan katta ekanligini tekshiradi va agar shunday bo'lsa, paragraf elementlarining satr balandligini sozladi.
2. Mantiqiy shartlarni baholash
@when mantiqiy shartlarni ham boshqara oladi, bu sizga ma'lum bir shart to'g'ri yoki noto'g'ri bo'lishiga asoslangan uslublarni qo'llashga imkon beradi. Bu foydalanuvchi afzalliklariga yoki ilova holatiga qarab uslublarni almashtirish uchun ayniqsa foydali bo'lishi mumkin.
:root {
--dark-mode: false;
}
@when (--dark-mode = true) {
body {
background-color: #333;
color: #fff;
}
}
Ushbu misolda, @when qoidasi --dark-mode maxsus xususiyati true ga o'rnatilganligini tekshiradi. Agar shunday bo'lsa, u body elementiga qorong'u fon rangini va ochiq tekst rangini qo'llaydi, bu esa qorong'u rejimni faollashtiradi.
3. Mantiqiy operatorlar bilan shartlarni birlashtirish
Murakkabroq senariylar uchun siz and, or va not kabi mantiqiy operatorlar yordamida bir nechta shartlarni birlashtirishingiz mumkin. Bu sizga juda aniq va nozik shartli uslublarni yaratishga imkon beradi.
:root {
--is-mobile: false;
--is-logged-in: true;
}
@when (--is-mobile = true and --is-logged-in = true) {
/* Faqat mobil qurilmalarda va foydalanuvchi tizimga kirganda qo'llaniladigan uslublar */
.mobile-menu {
display: block;
}
}
Ushbu misolda, @when qoidasi ham --is-mobile, ham --is-logged-in true ga o'rnatilganligini tekshiradi. Agar har ikkala shart ham bajarilsa, u mobil menyu elementini ko'rsatadi.
4. Element atributlarini tekshirish
Aniq sintaksis rivojlanishi mumkin bo'lsa-da, taklif qilingan texnik xususiyatlar element atributlarini to'g'ridan-to'g'ri shartda tekshirishga imkon beradi. Bu elementlarni ularning atributlariga asoslangan uslublashtirish uchun juda foydali bo'lishi mumkin, bu esa ko'p hollarda JavaScriptga asoslangan atribut selektorlariga bo'lgan ehtiyojni almashtirishi mumkin.
@when (element.hasAttribute('data-active')) {
[data-active] {
border: 2px solid blue;
}
}
@when (element.getAttribute('data-theme') = 'dark') {
body {
background-color: black;
color: white;
}
}
Birinchi misol elementning `data-active` atributiga ega ekanligini tekshiradi. Ikkinchi misol `data-theme` atributi 'qorong'u' ga tengligini tekshiradi.
5. Uslub so'rovlari va konteyner so'rovlari (potentsial integratsiya)
Hali ishlab chiqilayotgan bo'lsa-da, @when uslub so'rovlari va konteyner so'rovlari bilan integratsiyalashuvi mumkin. Bu sizga uslublarni ota konteyneriga qo'llaniladigan uslublar yoki konteyner o'lchamiga asoslangan holda qo'llash imkonini beradi, bu esa dizaynlaringizning moslashuvchanligi va moslashuvchanligini yanada oshiradi. Bu ayniqsa qiziq, chunki joriy konteyner so'rovi sintaksisi juda ko'p so'zli; @when ba'zi konteyner so'roq senariylari uchun yanada qisqaroq muqobil taklif qilishi mumkin.
Amaliy misollar va foydalanish holatlari
Keling, @when qoidasini real hayotdagi senariylarda qanday ishlatishingiz mumkinligini ko'rib chiqaylik:
1. Dinamik mavzularni almashtirish
Avvalroq ko'rsatilganidek, siz maxsus xususiyatlar va @when qoidasidan foydalanib, dinamik mavzularni almashtirishni osongina amalga oshirishingiz mumkin. Bu foydalanuvchilarga veb-saytingizning ko'rinishini o'z afzalliklariga qarab sozlashga imkon beradi.
2. Moslashtirilgan navigatsiya menyulari
Siz @when dan foydalanib, turli ekran o'lchamlari yoki qurilma yo'nalishlariga moslashadigan navigatsiya menyularini yaratishingiz mumkin. Misol uchun, siz ish stoli ekranlarida to'liq navigatsiya menyusini va mobil qurilmalarda gamburger menyusini ko'rsatishingiz mumkin.
3. Shaklni tasdiqlash
Siz @when dan shakl elementlarini ularning tasdiqlash holatiga qarab uslublash uchun foydalanishingiz mumkin. Misol uchun, siz yaroqsiz kiritish maydonlarini qizil chegara bilan ta'kidlashingiz mumkin.
4. Kontentning ko'rinishi
@when turli shartlarga asoslangan kontentni ko'rsatish yoki yashirish uchun ishlatilishi mumkin. Siz ma'lum bir reklama bannerini faqat uni allaqachon ko'rmagan foydalanuvchilarga, cookie qiymatiga yoki foydalanuvchi sozlamasiga asoslangan holda ko'rsatishingiz mumkin.
5. Xalqarolashtirish (i18n)
Asosiy maqsad bo'lmasa-da, @when mumkin foydalanuvchining lokaliga asoslangan uslublashni moslashtirish uchun maxsus xususiyatlar bilan birgalikda qo'llaniladi. Misol uchun, siz turli xarakterlar to'plamlariga yaxshiroq moslashish uchun shrift o'lchamlari yoki bo'shliqni sozlashingiz mumkin.
Misol uchun, agar sizda foydalanuvchining mahalliy joyini saqlaydigan `--locale` maxsus xususiyati mavjud deb faraz qilsak:
:root {
--locale: 'uz-UZ'; /* Standart mahalliy */
}
@when (--locale = 'ar') { /* Arabcha */
body {
direction: rtl; /* O'ngdan chapga tartib */
font-family: 'Arial', sans-serif; /* Misol shrift */
}
}
@when (--locale = 'zh-CN') { /* Soddalashtirilgan Xitoycha */
body {
font-family: 'Microsoft YaHei', sans-serif; /* Misol shrift */
font-size: 14px; /* Agar kerak bo'lsa, shrift o'lchamini sozlang */
}
}
Ushbu misol mahalliy arabcha (`ar`) yoki soddalashtirilgan xitoycha (`zh-CN`) bo'lishiga qarab matn yo'nalishini va shriftni sozladi. Bu to'g'ri i18n uslublari (turli xil kontentni taqdim etish kabi) uchun to'g'ridan-to'g'ri almashtirish bo'lmasa-da, u @when ning yanada mahalliy tajribaga qanday hissa qo'shishi mumkinligini ko'rsatadi.
Joriy holati va brauzer qo'llab-quvvatlashi
2024 yilning oxiriga kelib, @when qoidasi hali ham nisbatan yangi xususiyat bo'lib, barcha asosiy brauzerlar tomonidan to'liq qo'llab-quvvatlanmaydi. Hozirgi vaqtda u ba'zi brauzerlarda, masalan, Chrome va Edge-da eksperimental bayroqlar orqasida joylashgan.
Siz @when ning rivojlanishini va uning brauzer qo'llab-quvvatlashini Can I use va rasmiy CSS texnik xususiyatlari kabi veb-saytlarda kuzatishingiz mumkin.
Muhim eslatma: Xususiyat eksperimental bo'lgani sababli, @when qoidasining aniq sintaksisi va xatti-harakati u yakuniy holga keltirilgunga va barcha brauzerlar tomonidan to'liq qo'llab-quvvatlanmaguncha o'zgarishi mumkin. Eng so'nggi o'zgarishlardan xabardor bo'lish va shunga mos ravishda kodingizni sozlash muhimdir.
Polyfilllar va ish usullari
To'liq brauzer qo'llab-quvvatlashini kutayotganingizda, siz @when qoidasining xatti-harakatini taqlid qilish uchun polyfilllar yoki JavaScriptga asoslangan ish usullaridan foydalanishingiz mumkin. Ushbu echimlar odatda shartlarni baholash va tegishli uslublarni qo'llash uchun JavaScriptdan foydalanishni o'z ichiga oladi.
Biroq, polyfilllar va ish usullari ishlashga ta'sir ko'rsatishi mumkinligini va @when qoidasining xatti-harakatini mukammal takrorlamasligini yodda tuting. Ishlab chiqarish muhitlarida ulardan foydalanishdan oldin savdolarni diqqat bilan ko'rib chiqish muhimdir.
@when dan foydalanishning eng yaxshi amaliyotlari
@when qoidasidan foydalanganda e'tiborga olish kerak bo'lgan eng yaxshi amaliyotlar:
- Aniq va ixcham shartlardan foydalaning: Shartlaringizni tushunish osonligiga ishonch hosil qiling va juda murakkab ifodalardan saqlaning.
- Kodingizni hujjatlashtiring:
@whenqoidalaringizning maqsadini tushuntirish uchun izohlar qo'shing, ayniqsa ular murakkab mantiquni o'z ichiga olgan bo'lsa. - Sinovdan o'tkazing: Kodingizni turli brauzerlar va qurilmalarda kutilganidek ishlashini ta'minlash uchun sinovdan o'tkazing.
- Ishlashni ko'rib chiqing: Ishlashga salbiy ta'sir ko'rsatishi mumkin bo'lgan haddan tashqari murakkab
@whenqoidalaridan foydalanishdan saqlaning. - Progressiv yaxshilash:
@whenni progressiv yaxshilanish sifatida ishlating. Sizning asosiy uslubingiz u holda ham ishlashi kerak va@whenqoidasi faqat qo'shimcha funksionallikni qo'shishi kerak.
CSS shartli uslublashning kelajagi
@when qoidasi CSS shartli uslublashning evolyutsiyasida muhim qadamdir. U an'anaviy media so'rovlari va JavaScriptga asoslangan echimlarga yanada moslashuvchan, o'qiladigan va texnik xizmat ko'rsatishga yaroqli muqobillarni taklif etadi.
Brauzerda @when ni qo'llab-quvvatlash o'sishi bilan, u veb-ishlab chiquvchilar uchun tobora muhim vositaga aylanishi ehtimoli bor. Ushbu yangi xususiyatni qabul qilish orqali siz shartli uslublash uchun yangi imkoniyatlarni ochishingiz va ajoyib foydalanuvchi tajribasini taqdim etishingiz mumkin.
Alternativlar va ko'rib chiqishlar
@when jozibador afzalliklarni taqdim etsa-da, mavjud alternativalarni va ular ko'proq mos bo'lishi mumkin bo'lgan senariylarni ko'rib chiqish muhim:
- Media so'rovlari: Oddiy ko'rinishga asoslangan sozlashlar uchun media so'rovlari sodda va yaxshi qo'llab-quvvatlanadigan variant bo'lib qolmoqda.
- Konteyner so'rovlari: Konteynerlar o'lchamiga asoslangan komponentlarni uslublashtirishda, konteyner so'rovlari (to'liq qo'llab-quvvatlanganda) kuchli tanlov bo'ladi. Biroq,
@whenba'zi konteyner so'roqlari senariylari uchun yanada qisqa sintaksisni taklif qilishi mumkin. - JavaScript: Juda murakkab shartli mantiq uchun yoki tashqi APIlar bilan o'zaro ta'sir qilishda, JavaScript hali ham kerak bo'lishi mumkin. Biroq, imkon qadar yaxshi ishlash va texnik xizmat ko'rsatish uchun mantiqni CSSga o'tkazishga harakat qiling.
- CSS xususiyatlari so'rovlari (@supports): Brauzer tomonidan ma'lum bir CSS xususiyatining qo'llab-quvvatlanishini aniqlash uchun
@supportsdan foydalaning.@whenmavjud bo'lmaganda, zaxira uslublarini taqdim etish uchun bu juda muhimdir.
Real hayot misoli: @when bilan komponentga asoslangan uslublash
Keling, veb-saytingizda qayta ishlatiladigan "karta" komponentingiz bor deb tasavvur qilaylik. Siz kartani o'ziga xos tarzda, u o'ziga xos yoki yo'qligiga va foydalanuvchi tizimga kirganligiga qarab uslublashtirmoqchisiz. Biz ushbu holatlarni boshqarish uchun maxsus xususiyatlardan foydalanamiz.
/* Asosiy karta uslubi */
.card {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
}
/* O'ziga xos karta uslubi */
@when (element.hasAttribute('data-featured')) {
.card[data-featured] {
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card[data-featured] .card-title {
font-weight: bold;
color: #007bff;
}
}
/* Foydalanuvchiga xos uslub ( --logged-in o'rnatish uchun JavaScript talab qilinadi) */
@when (--logged-in = true) {
.card {
/* Tizimga kirgan foydalanuvchilar uchun qo'shimcha uslub */
background-color: #f9f9f9;
}
}
/* Shartlarni birlashtirish */
@when (element.hasAttribute('data-featured') and --logged-in = true) {
.card[data-featured] {
/* Yanada aniq uslublash */
background-color: #e9ecef;
transform: translateY(-5px); /* Nozik ko'tarish effekti */
}
}
Ushbu misolda:
- Birinchi
@whenblokidata-featuredatributiga ega bo'lganda kartani uslublashtiradi. - Ikkinchi
@whenbloki tizimga kirgan foydalanuvchilar uchun foydalanuvchiga xos uslubni taqdim etadi (agar sizda--logged-inmaxsus xususiyatini o'rnatish uchun JavaScript mexanizmi bo'lsa). - Yakuniy
@whenbloki har ikkala shart bajarilganda yanada aniq uslubni qo'llab, har ikkala shartni birlashtiradi.
Ushbu misol komponentga asoslangan arxitekturada murakkab shartli uslublash senariylarini boshqarishda @when ning moslashuvchanligini namoyish etadi.
Xulosa
CSS @when qoidasi veb-ishlab chiquvchilarga yanada dinamik, moslashuvchan va texnik xizmat ko'rsatishga yaroqli uslublar jadvallarini yaratishga imkon beruvchi o'yinni o'zgartiruvchi xususiyatdir. Brauzer qo'llab-quvvatlashi etuk bo'lgani sari, @when zamonaviy veb-ilovalarni yaratish uchun ajralmas vositaga aylanishga tayyor. Ushbu kuchli yangi xususiyatni qabul qilish orqali siz shartli uslublash uchun yangi imkoniyatlarni ochishingiz va ajoyib foydalanuvchi tajribasini taqdim etishingiz mumkin.
@when qoidasi rivojlanishda va CSSning kelajagini shakllantirishda davom etishi bilan kelajakdagi yangilanishlar va o'zgarishlarni kuzatib boring!
Qo'shimcha o'qish va resurslar
- CSS shartli qoidalar moduli 3-darajasi (Rasmiy texnik xususiyatlar - yangilanishlar uchun tekshiring!)
- Can I use... (Brauzer qo'llab-quvvatlashni kuzatish)
- Mozilla Developer Network (MDN) (CSS hujjatlari)